.text-diff {
	border: 1px solid #E0E0E0;
	position: relative;
}
.text-diff>.head {
	padding: 8px;
	border-bottom: 1px solid #E0E0E0;
}
.text-diff>.head .diff-title span {
	word-break: break-all;
}
.text-diff>.head .actions>a {
	margin-right: 0;
}
.text-diff>.head>div {
	margin-right: 8px;
}
.text-diff>.head>div:last-child {
	margin-right: 0;
}

.text-diff>.body {
	font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
	font-size: 12px;
	table-layout: fixed;
	border-collapse: separate;
}

/* 
 * have to use relative here as otherwise the last table row will have problem
 * focusing on expander link. This relates to negative margin top 
 * specified for change class in revision diff panel
 */
.text-diff>.body>tbody>tr>td {
	position: relative;
}
.text-diff>.body>tbody>tr>td.number {
	padding: 0 4px;
	border-left: 1px solid #E0E0E0;
	text-align: right;
	font-size: 12px;
	color: #9E9E9E;
}
.text-diff>.body>tbody>tr>td.operation {
	border-left: 1px solid #E0E0E0;
}
.text-diff>.body>tbody>tr>td:FIRST-CHILD {
	border-left: none !important;
}
.text-diff>.body>tbody>tr:FIRST-CHILD>td {
	border-top: none !important;
}
.text-diff>.body>tbody>tr:LAST-CHILD>td {
	border-bottom: none !important;
}
.text-diff>.body>tbody>tr.expander>td.skipped {
	padding: 6px 16px;
	border-left: 1px solid #D8E2F2;
	background: #f4f7fb;
	color: #999;
}
.text-diff>.body>tbody>tr.expander>td.expander {
	border-left: 1px solid #D8E2F2;
	text-align: center;
}
.text-diff>.body>tbody>tr.expander>td.expander a {
	display: block;
	background: #edf2f9;
	padding: 6px 0;
	color: #888;
}
.text-diff>.body>tbody>tr.expander>td.expander>a:hover {
	background: #4078c0;
	color: white;
}
.text-diff>.body>tbody>tr>td.old.number {
	background: #ffdddd;
	border-left: 1px solid #f1c0c0;
}
.text-diff>.body>tbody>tr>td.old.content {
	background: #ffecec;
}
.text-diff>.body>tbody>tr>td.old.operation {
	border-left: 1px solid #f1c0c0;
	background: #ffecec;
}
.text-diff>.body>tbody>tr>td.old .delete {
	background-color: #F8B8B8;
	text-decoration: line-through;
}
.text-diff>.body>tbody>tr>td.new.number {
	background: #dbffdb;
	border-left: 1px solid #c1e9c1;
}
.text-diff>.body>tbody>tr>td.new.content {
	background: #eaffea;
}
.text-diff>.body>tbody>tr>td.new.operation {
	border-left: 1px solid #c1e9c1;
	background: #eaffea;
}
.text-diff>.body>tbody>tr>td.new .insert {
	background-color: #94F094;
}
.text-diff>.body>tbody>tr>td.old.new.number {
	background: #FAF3D0;
	border-left: 1px solid #EBD049;
}
.text-diff>.body>tbody>tr>td.old.new.content {
	background: #FCF8E4;
}
.text-diff>.body>tbody>tr>td.old.new.operation {
	border-left: 1px solid #EBD049;
	background: #FCF8E4;
}
.text-diff>.body>tbody>tr>td.content {
	white-space: pre-wrap;
	word-wrap: break-word;
}
.text-diff>.body>tbody>tr>td.operation {
	font-weight: bold;
	padding: 0 4px 0 4px;
}
.text-diff>.body>tbody>tr.original+.expanded>td {
	border-top: 1px solid #E8E8E8;
}
.text-diff>.body>tbody>tr.expanded+.original>td {
	border-top: 1px solid #E8E8E8;
}
.text-diff>.body>tbody>tr.expanded>td {
	background: #F9F9F9;
}
.text-diff>.body>tbody>tr:hover>td {
	background: #E8F2FE !important;
}
.text-diff>.body>tbody>tr.code {
	background: inherit;
	border: inherit;
	border-radius: inherit;
	padding: inherit;
	margin: inherit;
	font-family: inherit;
	font-size: inherit;
}
.text-diff>.body>tbody>tr>td.content>span.content-mark {
	background: #CCCCFF;
}
.text-diff>.body>tbody>tr>td.content>span.content-mark.insert {
	background: #88FFFF;
}
.text-diff>.body>tbody>tr>td.content>span.content-mark.delete {
	background: #FF88FF;
}

.text-diff>.body>tbody>tr>td.number>.comment-indicator {
	margin: 0 4px;
	color: #999;
	font-size: 13px;
}
.text-diff>.body>tbody>tr>td.number>.comment-indicator:hover {
	color: #555;
}
.text-diff>.body>tbody>tr>td.number>.comment-indicator svg {
	margin-top: 0;
}
.comment-popover a {
	display: block;
	color: #999;
	text-decoration: none;
	white-space: nowrap;
}
.comment-popover a:hover {
	color: #555;
}
.text-diff>.body>tbody>tr>td.number>.comment-trigger.active, 
.comment-popover .comment-trigger.active {
	color: black;	
}
.text-diff>.body>tbody>tr>td.number>.comment-trigger.active {
	line-height: 14px;
}
.text-diff>.body>tbody>tr>td.blame {
	font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding: 0 4px;
	border-left: 1px solid #E0E0E0;
}
.text-diff>.body>tbody>tr>td.blame.abbr {
	text-overflow: inherit;
}
.text-diff>.body>tbody>tr>td.blame .hash, .text-diff>.body>tbody>tr>td.blame .date {
	margin-right: 8px;
}
.text-diff>.body>tbody>tr>td.blame.abbr .hash {
	margin-right: 0;
}
.text-diff>.body>tbody>tr>td.blame .same-as-above {
	margin-left: 90px;
	margin-top: -8px;
	color: #666;
	font-size: 16px;
}
.text-diff>.body>tbody>tr>td.blame.abbr .same-as-above {
	margin-left: 14px;
}
.diff-tokentooltip {
	background-color: #FBFCC5; 
	border: 1px solid black;
	border-radius: 4px; 
	color: black; 
	font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; 
	font-size: 10pt; 
	overflow: auto; 
	padding: 4px 8px; 
	z-index: 100; 
	max-width: 900px; 
	max-height: 600px;
}
